<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>张景浩列传</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <style>
      :root {
        --primary-color: #2c3e50;
        --accent-color: #c19a6b;
        --paper-color: #f8f3e6;
      }

      body {
        background: linear-gradient(to right, #f1e8d9, #e6ddce);
        font-family: "Noto Serif SC", serif;
        line-height: 1.8;
        margin: 0;
        padding: 2rem;
      }

      .container {
        max-width: 800px;
        margin: 0 auto;
        background: var(--paper-color);
        padding: 3rem 4rem;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
        position: relative;
        border-radius: 2px;
      }

      .seal {
        position: absolute;
        right: -30px;
        top: -30px;
        width: 120px;
        opacity: 0.8;
      }

      h1 {
        font-family: "Ma Shan Zheng", cursive;
        text-align: center;
        color: var(--primary-color);
        font-size: 2.8rem;
        margin-bottom: 2rem;
        position: relative;
      }

      h1::after {
        content: "";
        display: block;
        width: 120px;
        height: 3px;
        background: var(--accent-color);
        margin: 1rem auto;
      }

      .chapter {
        margin: 2.5rem 0;
        padding: 1.5rem;
        border-left: 4px solid var(--accent-color);
        background: linear-gradient(
          to right,
          transparent,
          rgba(193, 154, 107, 0.05)
        );
      }

      .highlight {
        color: var(--accent-color);
        font-weight: 700;
      }

      blockquote {
        margin: 2rem 0;
        padding: 1.5rem;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 3px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        font-style: italic;
      }

      .eulogy {
        text-align: right;
        padding: 2rem;
        background: rgba(44, 62, 80, 0.05);
        margin-top: 3rem;
        position: relative;
      }

      @media (max-width: 768px) {
        .container {
          padding: 2rem;
          margin: 1rem;
        }
        h1 {
          font-size: 2rem;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>张景浩列传</h1>

      <section class="chapter">
        <p>
          张氏世居雍丘，累叶簪缨，钟鸣鼎食之家。至景浩少时，已显龙章凤姿。其人身长玉立，风神秀彻，行若春林初月，言如漱玉鸣泉。
          更兼敏悟天成，诗书过目成诵，弈画通神入妙。然谦光自牧，每闻赞誉，辄含笑拂之，浑似清泉澹澹，不染纤尘。
        </p>
      </section>

      <section class="chapter">
        <p>
          时雍丘庠序间有谚云："<span class="highlight"
            >行经张郎处，十女九回顾。</span
          >" 尝有同窗相邀至杞高餐厅用膳，甫及楼前，但见途中，娇音此起："<span
            class="highlight"
            >愿托春风寄柳枝</span
          >"，"<span class="highlight">但求鸾镜照青丝</span
          >"，更有绛纱女子掷帕于道。虽掷果盈途，景浩顾盼无倾，其清标傲世若此。
        </p>
      </section>

      <section class="chapter">
        <p>
          然癸卯仲春，报告厅前忽现奇缘。时景浩正持玉照填牒，忽闻环佩清响，抬眸竟遇兰襟旧谊。彼姝温润如羊脂，谈吐若幽兰，昔年总角之谊，今作倾盖之欢。及至暮钟催别，伊人忽执袂含涕："<span
            class="highlight"
            >关河万里，尺素难凭。乞君半面丹青，纵隔烟涛，犹见故人颜色。</span
          >"
          景浩默然授照，徐送伊人至高三楼下，负手徐归，未审曾否回眸。后乃将所得小像缄藏于青箱之底，自此晨昏课读，必启匣相顾，然终其年无人得窥此秘。
        </p>
      </section>

      <blockquote>
        卖油翁论曰：世谓张郎冷月寒潭，不近人间烟火。然观其藏照之举，方知君子情深似海，惟不示人耳。盖情之所钟，虽万籁俱寂而心潮难平，纵千山暮雪而余温犹在，此诚大雅之道也。
      </blockquote>

      <section class="chapter">
        <p>
          刘氏有女若彤者，容止若朝霞映雪，性似春水涵光。蕙质兰心，具林下风致；怀瑾握瑜，存松筠之节。
          其与景浩少时相知事，然前尘影事，多湮没无考。唯闻己亥盛夏，鱼雁频传，然尺素尽付流云，景浩亦缄口如瓶。
        </p>
      </section>
      <section class="chapter">
        <p>
          是岁秋闱放榜，景浩负笈锦官城，若彤独守雍丘故地。虽参商各曜，然云树之思未尝稍减。值玄英岁寒，景浩忽请缨赴复读班宣教，时人皆赞其念旧，实则醉翁之意，尽在绛帐西窗。
          当是时也，飞雪漫庭，伊人执卷临窗，眉目如昔。景浩徐行近前，广袖垂云处，暗藏浅拥，恍若梅枝轻触竹影，刹那即成永恒。
        </p>
      </section>
      <section class="chapter">
        <p>
          迨夫锦水汤汤，洛川渺渺，三秋桂子，几度蟾圆。初时犹有青鸟殷勤，渐次音书寥落。况复景浩身侧桃蹊李径，若彤窗前月落参横。然若彤每对妆台，必抚当日所赠玉簪；偶翻诗笺，辄题
          "<span class="highlight">蜀道青鸾断</span>"、"<span class="highlight"
            >梁园旧梦空</span
          >" 之句。更于花朝月夕，数寄丹青于诗墙， 或书 "<span class="highlight"
            >故园梅萼今犹在，不见骑鲸弄玉人</span
          >"，或叹 "<span class="highlight">此情可待成追忆，只是当时已惘然</span
          >"，字字皆沁鲛珠，然未知观者何人。
        </p>
      </section>

      <blockquote>
        卖油翁论曰：观刘张之情，似绛树双声，黄陵二女。一者情深不寿，一者慧极必伤。昔薛洪度制笺酬唱，终负枇杷；今刘若彤题帕牵萦，空余锦瑟。岂不闻河汉清浅，固非人力可渡；
        参商辉映，本是造化弄人？然则情天恨海间，犹见飞蛾赴火之贞，精卫填海之诚，此殆所谓
        "人间别久不成悲" 者欤？
      </blockquote>
    </div>
  </body>
</html>
